<template>
    <div class="sidebar">
        <el-menu
                class="sidebar-menu"
                :default-active="onRoutes"
                :collapse="collapse"
                background-color="#324157"
                text-color="#bfcbd9"
                active-text-color="#20a0ff"
                unique-opened
                router>
            <el-submenu
                    v-for="(menu,midx) in items"
                    :index="midx + ''"
                    :key="midx">
                <template slot="title">
                    <i :class="menu.icon"></i>
                    <span>{{menu.title}}</span>
                </template>
                <el-menu-item
                        v-for="submenu in menu.subs"
                        :key="submenu.index"
                        :index="submenu.index">
                    <span>{{submenu.title}}</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>
<script>
    import bus from './bus.js'
    import menuConfig from '@/config/menuConfig'

    export default {
        data() {
            return {
                collapse: false,
                items: menuConfig
            }
        },
        computed: {
            onRoutes() {
                return this.$route.meta.name
            }
        },
        components: {},
        methods: {},
        created() {
            // 通过 Event Bus 来进行组件间的通信
            bus.$on('collapse', msg => {
                this.collapse = msg
            })
        }
    }
</script>

<style lang="less" scoped type="text/less">
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }
    /* 隐藏滚动条 */
    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .sidebar > ul {
        height: 100%;
    }

</style>